import React from 'react'
import { TabBar} from 'antd-mobile';

import IndexPage from '../routes/IndexPage';
import ShopList from "./ShopList";
import UserCenter from "./UserCenter";
import ShoppingCart from "./ShoppingCart";

export default class Tabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'Home',
      hidden: false,
      fullScreen: false,
    };
  }


  render() {

    const pages = [{
      title:'订水',
      key:'Home',
      icon:'url(http://123.57.161.212:8080/group1/M00/00/5A/ezmh1Ft5G_eACW0vAAAIjiGyfk0083.png) center center /  21px 21px no-repeat',
      selIcon:'url(http://123.57.161.212:8080/group1/M00/00/5A/ezmh1Ft5G6iALFeGAAAHpI52XoY862.png) center center /  21px 21px no-repeat',
      page:<IndexPage/>
    },{
      title:'水站',
      key:'Shops',
      icon:'url(http://123.57.161.212:8080/group1/M00/00/5A/ezmh1Ft5HE2AGJktAAANDnyCYY4411.png) center center /  21px 21px no-repeat',
      selIcon:'url(http://123.57.161.212:8080/group1/M00/00/5A/ezmh1Ft5HF6AXFQCAAAMBK1GQn0441.png) center center /  21px 21px no-repeat',
      page:<ShopList/>
    },{
      title:'购物车',
      key:'ShoppingCart',
      icon:'url(http://123.57.161.212:8080/group1/M00/00/5A/ezmh1Ft5HHqAShtTAAANBvn-wOE441.png) center center /  21px 21px no-repeat',
      selIcon:'url(http://123.57.161.212:8080/group1/M00/00/5A/ezmh1Ft5HIiAZoDpAAAMdULyJk8406.png) center center /  21px 21px no-repeat',
      page:<ShoppingCart/>
    },{
      title:'我',
      key:'UserCenter',
      icon:'url(http://123.57.161.212:8080/group1/M00/00/5A/ezmh1Ft5HJmAWf9yAAANzfKSpYg380.png) center center /  21px 21px no-repeat',
      selIcon:'url(http://123.57.161.212:8080/group1/M00/00/5A/ezmh1Ft5HKWADVbSAAALyuKtN08005.png) center center /  21px 21px no-repeat',
      page:<UserCenter/>
    }] ;

    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#18B5ED"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          {

            // http://123.57.161.212:8080/group1/M00/00/5A/ezmh1Ft5GpqAN4OTAAABP5T9xb8812.png
            pages.map(d=>{
              return <TabBar.Item
                title={d.title}
                key={d.key}
                icon={<div style={{
                  width: '22px',
                  height: '22px',
                  background: d.icon}}
                  />
                }
                selectedIcon={<div style={{
                  width: '22px',
                  height: '22px',
                  background: d.selIcon}}
                />
                }
                selected={this.state.selectedTab === d.key}
                onPress={() => {
                  this.setState({
                     selectedTab: d.key,
                  });
                }}
                data-seed="logId"
              >
                {d.page}
              </TabBar.Item>
            })
          }
        </TabBar>
      </div>
    );
  }
}

